<template>
  <div class="profile-attention">
    <van-nav-bar title="我的关注" left-arrow   @click-left="onClickLeft">
      <template #right >
        <span class="s" @click="manage" v-if="checkboxView==false">管理</span>
        <span class="s" v-else @click="cancel">取消</span>
      </template>
    </van-nav-bar>
    <div class="profile-attention-items">
      <ul>
        <li v-for="(item,index) in attentionList" :key="index">
          <div>
                <div class="profile-attention-item">
                  <div class="profile-attention-item-left"  @click="toDetail(item.activity_id)">
                    <div class="profile-attention-item-left_attention">
                      {{item.number_of_favorites}}人关注
                    </div>
                    <div class="profile-attention-item-left_percent">
                      <van-progress :percentage="item.t"  stroke-width="20"/>
                    </div>
                  </div>
                  <div class="profile-attention-item-right"  @click="toDetail(item.activity_id)">
                    <span>{{item.activity_name}}</span>
                  </div>
                  <div class="profile-attention-item-check" v-show="checkboxView">
                   <van-checkbox  v-model="item.check" checked-color="#ee0a24" icon-size="25px"></van-checkbox>
                  </div>
                </div>
            </div>
          </li>

      </ul>
      
    </div>
    <div class="profile-attention-buttom" v-show="checkboxView" @click="delItem">
      <span>删除</span>
    </div>
    <van-dialog v-model="show" title="警告" show-cancel-button @confirm="confirmDel" @cancel="cancelDel()">
      <div class="profile-attention-dialog">
        <span>删除后将无法撤销,确认删除吗？</span>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {getAttentionList , cancelAttention} from '@/api/activity'
export default {
  data(){
    return {

      mana:false,
      // 删除成功提示
      // notifyShow:false,
      // 删除二次确认显示与隐藏
      show:false,
      // 管理/取消显示与隐藏
      checkboxView:false,
      // 关注内容
      attention:[
        {
          rate:'4.12%',
          meta:'成立以来年化增长',
          name:'兴全恒裕债券C',
          check:false
        },
        {
          rate:'32.21%',
          meta:'成立以来年化增长',
          name:'万家智造优势混合A',
          check:false
        },
        {
          rate:'4.12%',
          meta:'成立以来年化增长',
          name:'兴全恒裕债券C',
          check:false
        },
      ],
      // 关注列表
      attentionList:[]
    }
  },
  created(){
    this.getAttentionList()
  },
  methods:{
    getAttentionList(){
      getAttentionList().then(res=> {
        for(let i=0;i<res.data.list.length;i++){
          let obj;
          obj  = res.data.list[i];
          obj.check = false;
          let product_now_number = ((res.data.list[i].product_total-res.data.list[i].product_now_number) / res.data.list[i].product_total)*100
          let t = parseInt(product_now_number);
          obj.t = t;
        this.attentionList.push(obj);
        }
      })
    },
    // 返回上一层路由
    onClickLeft(){
      this.$router.go(-1)
    },
    // 删除按钮的删除
    manage(){
      this.checkboxView = true
    },
    // 取消删除按钮 并初始化复选框
    cancel(){
      for(let i=0;i<this.attentionList.length;i++){
          this.$set(this.attentionList[i],"check",false)
      }
      this.checkboxView = false
    },
    // 删除按钮
    delItem(){
      let t = false;
      for(let i=0;i<this.attentionList.length;i++){
        if(this.attentionList[i].check==true) t = true;
      }
      if(t){
        this.show =  true
      }else {
      }  
    },
    // 删除选中的关注内容
    swiperDel(index){
      let _sum = this.attentionList.length
      for(let i=0;i<_sum;i++){
        if(i==index) {
          let str = this.attentionList[index].activity_id;
          let t = parseInt(str);
          cancelAttention(t).then(res=> {
            if(res.code==0){
              this.attentionList.splice(i,1);
              this.$toast("取消关注成功");
            }
          })
        }
      }
      this.notifyShow = true;
      setTimeout(() => {
        this.notifyShow = false
      },500)
    },
    // 确认删除
    confirmDel(){
        this.$toast.loading('删除中...');
        setTimeout(() => {
          for(let i=0;i<this.attentionList.length;i++){
            if(this.attentionList[i].check){
                let str = this.attentionList[i].activity_id;
                let t = parseInt(str);
                cancelAttention(t).then(res=> {
                  if(res.code==0){
                   this.attentionList.splice(i,1);
                   this.$toast("删除成功");
                   i--
                  }
                })
            }
          }
          this.$toast.clear();
          },500)
    },
    // 取消删除
    cancelDel(){

    },
    // push到活动详情
    toDetail(id){
      this.$router.push(`/activityDetail?q=${id}`)
    },
    
  }
}
</script>

<style lang="less">
.s{
  width: 60px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  // font-family: Microsoft Yahei;
}
.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }
  .profile-attention-buttom{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 50px;
    // border: 1px solid red;
    background-color: rgb(219, 219, 219);
    span {
      color: rgba(224, 19, 36, 100);
      font-size: 20px;
      text-align: left;
      font-family: PingFangSC-regular;
    }
  }
  .profile-attention-items {
    width: 100%;
    height: 500px;
    margin-top: 5px;
    .cell-right-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 100%;
      background-color: red;
    }
    .profile-attention-item {
      display: flex;
      border: 1px solid rgb(235, 235, 235);
      justify-content: space-around;
      border-bottom: 1px solid rgb(189, 187, 187);
      background-color: rgb(255, 255, 255);
      height: 70px;
      .profile-attention-item-check{
        margin-top: 25px;
      }
      .profile-attention-item-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 45%;
        // border: 1px solid red;
        .profile-attention-item-left_attention{
          margin-bottom: 10px;
          color: rgba(173, 172, 172, 100);
          font-size: 14px;
          text-align: left;
          font-family: PingFangSC-regular;
        }
        .profile-attention-item-left_percent{
          width: 100%;
        }
      }
      .profile-attention-item-right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35%;
         overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
        // border: 1px solid red;
        span {
          color: rgba(16, 16, 16, 100);
          font-size: 18px;
          text-align: left;
          font-family: PingFangSC-light;
        }
      }

    }
    .profile-attention-item:last-child {
      border-bottom: none;
    }
  }
  .profile-attention-dialog{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    width: 300px;
    height: 50px;

  }
</style>